<template>
  <view class="main-content" v-if="isLoad">
    <view
      class="main-column"
      v-for="item in showData"
      :key="item.id"
      @click="toDetail(item.id)"
    >
      <!-- 被驳回提示 -->
      <view class="reject-box" v-if="type == 'myposts' && status == 3"
        >驳回原因：{{
          item.reject_reason || "帖子内容不符，请修改后重新提交审核"
        }}</view
      >
      <!-- 用户信息 -->
      <view class="user-info">
        <view class="infos">
          <view class="info-left"
            ><image :src="item.avatar" mode="aspectFit"></image
          ></view>
          <view class="info-right">
            <view class="right-title">{{ item.nickname }}</view>
            <view class="right-time">发布于&nbsp;{{ item.time }}</view>
          </view>
        </view>
        <view
          class="info-status"
          v-if="type == 'myposts' && status == 1"
          style="font-size: 32rpx; color: #fb7a26"
          >待审核</view
        >
        <view
          class="info-status"
          v-if="type == 'myposts' && status == 2"
          style="font-size: 32rpx; color: #3ab74e"
          >已发布</view
        >
        <view
          class="info-status"
          v-if="type == 'myposts' && status == 3"
          style="font-size: 32rpx; color: #f00"
          >已驳回</view
        >
      </view>
      <!-- 用户发布的内容 -->
      <view class="user-cont">
        <!-- 文字描述 -->
        <view class="text-cont">{{ item.content }}</view>
        <!-- 图片显示 -->
        <view class="img-cont" v-if="item.images.length">
          <image
            :src="value"
            mode="aspectFit"
            v-for="(value, index) in item.images"
            :key="index"
            @click.stop="previewImage(item.images, index)"
          ></image>
          <!-- 共计张 -->
          <view class="img-mount">共{{ item.imagesNum }}张</view>
        </view>
      </view>
      <!-- 点赞信息 -->
      <view class="bottom-cont">
        <view class="left-label">{{ item.title }}</view>
        <view class="right-like" v-if="type == 'myposts' || type == 'mylike'">
          <view
            class="likes"
            @click.stop="likePosts(item.id, item.give_status)"
          >
            <image
              :src="
                item.give_status == 1
                  ? '/static/forum/like-check.png'
                  : '/static/forum/like.png'
              "
              mode="aspectFit"
            ></image>
            <text>{{ item.give }}</text>
          </view>
          <view class="comment">
            <image
              :src="
                item.comment_status == 1
                  ? '/static/forum/comment-check.png'
                  : '/static/forum/comment.png'
              "
              mode="aspectFit"
            ></image>
            <text>{{ item.comment }}</text>
          </view>
          <view
            class="collection"
            @click.stop="collections(item.id, item.collection_status)"
          >
            <image
              :src="
                item.collection_status == 1
                  ? '/static/forum/collection-check.png'
                  : '/static/forum/collection.png'
              "
              mode="aspectFit"
            ></image>
            <text>{{ item.collection }}</text>
          </view>
        </view>

        <view class="right-like" v-else>
          <view
            class="likes"
            @click.stop="likePosts(item.id, item.give_status)"
          >
            <image
              :src="
                item.give_status == 1
                  ? '/static/forum/like-check.png'
                  : '/static/forum/like.png'
              "
              mode="aspectFit"
            ></image>
            <text>{{ item.give }}</text>
          </view>
          <view class="comment">
            <image
              :src="
                item.comment_status == 1
                  ? '/static/forum/comment-check.png'
                  : '/static/forum/comment.png'
              "
              mode="aspectFit"
            ></image>
            <text>{{ item.comment }}</text>
          </view>
        </view>
      </view>

      <!-- 帖子修改 -->
      <view class="posts-alter" v-if="type == 'myposts'">
        <view class="alters" @click.stop="alterpost(item.id)">
          <image src="/static/forum/alter.png" modex="aspectFit"></image>
          <text>修改帖子</text>
        </view>
        <view class="delete" @click.stop="deletepost(item.id)">
          <image src="/static/forum/dell.png" modex="aspectFit"></image>
          <text>删除帖子</text>
        </view>
      </view>
    </view>
    <view class="empty" v-if="showData.length == 0">
      <image
        src="/static/empty.png"
        mode="widthFix"
        style="width: 150rpx; height: 150rpx"
      ></image>
      暂无数据~
    </view>
    <view
      style="
        margin: 10rpx 0;
        color: #cccccc;
        font-size: 26rpx;
        text-align: center;
      "
      v-if="showData.length != 0"
      >没有更多了~</view
    >
  </view>
</template>

<script>
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  props: ["showData", "type", "status"],
  data() {
    return {
      adminImgPath: app.globalData.adminImgPath,
      isLoad: false,
      like: true,
      comment: true,
      collection: true,
      flag: false,
      isShow: false,
      isFlag: false,
    };
  },
  watch: {
    status: {
      handler(newName, oldName) {
        setTimeout(() => {
          this.isLoad = true;
        }, 500);
      },
      immediate: true,
      deep: true,
    },
  },

  methods: {
    // 去详情页
    toDetail(id) {
      if (!uni.getStorageSync("local_user_session")) {
        uni.redirectTo({
          url: "/pages/login/index",
        });
        return;
      }
      if (
        (this.type == "myposts" && this.status == 1) ||
        (this.type == "myposts" && this.status == 3)
      ) {
        uni.navigateTo({
          url:
            "/pages/Component/forum/Program/index/listDetail?hide=true&id=" +
            id,
        });
      } else {
        uni.navigateTo({
          url: "/pages/Component/forum/Program/index/listDetail?id=" + id,
        });
      }
    },
    // 图片预览
    previewImage(images, currentIndex) {
      wx.previewImage({
        current: images[currentIndex], // 当前显示图片的链接
        urls: images, // 需要预览的图片链接列表
      });
    },
    // 修改帖子
    alterpost(id) {
      // 跳转修改页面
      uni.navigateTo({
        url: "/pages/Component/forum/Program/release/release?type=1&id=" + id,
      });
    },

    // 删除帖子
    deletepost(id) {
      uni.showModal({
        // title: '删除提示',
        // title: '是否删除此帖子，确认删除请点击删除按钮',
        content: "是否删除此帖子，确认删除请点击删除按钮",
        confirmText: "删除",
        confirmColor: "#F00",
        cancelColor: "#999",
        success: (res) => {
          if (res.confirm) {
            this.$emit("delPosts", id);
          }
        },
      });
    },

    // 点赞帖子
    likePosts(id, status) {
      this.$emit("likePosts", id, status);
    },
    // 收藏/取消收藏
    collections(id, status) {
      this.$emit("collections", id, status);
    },
  },
};
</script>

<style lang="scss">
.main-content {
  margin: 20rpx;
  .main-column {
    background: #ffffff;
    padding: 26rpx;
    margin-bottom: 16rpx;
    border-radius: 5px;

    .reject-box {
      padding: 22rpx 32rpx;
      margin-bottom: 10rpx;
      background: #fff2f2;
      border-radius: 5px;
      font-size: 24rpx;
      line-height: 34rpx;
      color: #ff0000;
    }

    .user-info {
      padding: 5rpx;
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .infos {
        display: flex;
        align-items: center;

        .info-left {
          height: 80rpx;
          margin-right: 20rpx;

          image {
            width: 86rpx;
            height: 86rpx;
            border-radius: 50%;
          }
        }

        .info-right {
          height: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .right-title {
            font-size: 28rpx;
          }

          .right-time {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }
    }

    .user-cont {
      margin-top: 12rpx;

      .text-cont {
        font-size: 28rpx;
        color: #666666;
        line-height: 50rpx;

        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        white-space: nowrap; /*规定段落中的文本不进行换行 */
        width: 100%; /*需要配合宽度来使用*/
      }

      .img-cont {
        margin-top: 20rpx;
        width: 100%;
        height: 160rpx;
        border-radius: 18rpx;
        display: flex;
        overflow: hidden;
        position: relative;

        image {
          width: 33%;
          height: 160rpx;
          margin-right: 1%;

          &:last-child {
            margin-right: 0;
          }
        }

        .img-mount {
          width: 80rpx;
          height: 40rpx;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 6rpx;
          position: absolute;
          font-size: 22rpx;
          color: #ffffff;
          bottom: 10rpx;
          right: 20rpx;
          text-align: center;
          line-height: 40rpx;
        }
      }
    }

    .bottom-cont {
      margin-top: 30rpx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-label {
        width: 120rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        color: #fb7a26;
        font-size: 23rpx;
        background: #fff2d9;
        border-radius: 7rpx;
      }

      .right-like {
        width: 240rpx;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .likes {
          display: flex;
          align-items: center;

          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 10rpx;
          }
        }

        .comment {
          display: flex;
          align-items: center;

          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 10rpx;
          }
        }
      }

      .right-like {
        width: 340rpx;
        font-size: 22rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .likes {
          display: flex;
          align-items: center;

          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 10rpx;
          }
        }

        .comment {
          display: flex;
          align-items: center;

          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 10rpx;
          }
        }

        .collection {
          display: flex;
          align-items: center;

          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .posts-alter {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 26rpx 0 0;

      .alters {
        width: 48%;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5%;
        background: rgba(255, 241, 204, 0.5);
        border-radius: 18rpx;
        color: #fb7a26;
        font-size: 28rpx;

        > image {
          width: 45rpx;
          height: 45rpx;
          display: block;
          margin-right: 20rpx;
        }
      }

      .delete {
        width: 48%;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(250, 83, 65, 0.1);
        border-radius: 18rpx;
        color: #ff0000;
        font-size: 28rpx;

        > image {
          width: 45rpx;
          height: 45rpx;
          display: block;
          margin-right: 20rpx;
        }
      }
    }
  }
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999999;
    margin-top: 77rpx;
    font-size: 24rpx;
    image {
      margin: 50rpx 0 20rpx;
    }
  }
}
</style>
